<template>
    <div class="container">
        <!-- header下面的面包屑 -->
        <!-- closable:是否有X号,type:按钮颜色,effect:是否被选定,@click:点击选择事件,@close:点击x事件-->
        <el-tag 
            v-for="tag in tabList" 
            :key="tag.label"
            :closable="tag.label === '首页'?false:true"
            type="success"
            :effect="isEffect(tag)"
            @click="selectTab(tag)"
            @close="handleClose(tag)"
            >
                {{ tag.label }}
        </el-tag>
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        nama: 'TabBread',
        data() {
            return {

            };
        },
        computed:{
            // 获取store中的tabList
            ...mapState('Tabs',['tabList']),
        },
        methods:{
            // 标签按钮的切换(dark和plain类型的选择)
            isEffect(item){
                if(this.$route.path === '/home/firsthome' && item.path === '/home'){
                    return "dark";
                }
                return this.$route.path === '/home/'+item.path?"dark":"plain";
            },
            // 点击切换路由
            selectTab(item){
                // 解决重复点击会出现错误的问题
                if('/home/'+item.path !== this.$route.path){
                    this.$router.push({ path: '/home/' + item.path })
                }
            },
            // 点击x事件
            handleClose(item){
                // 1. 去除掉tabList中的tab路由
                this.$store.commit('Tabs/DELETE_TAB',item)
                // 2. 如果当前的路由就是去除的路由，那就重新定位到首页
                if(this.$route.path === '/home/'+item.path){
                    this.$router.push({path:'/home'})
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.container{
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    box-shadow: 0px 40px 5px #000000 !important;
    .el-tag{
        margin-left: 5px;
        cursor: pointer;
    }
}
</style>